<template>
  <div class="container">
    <div v-title="pageTitle"></div>
    <div class="banner_box" v-if="bgcImg">
      <img :src="bgcImg" mode="" class="banner_img" />
    </div>
    <div class="input_box">
      <el-input
        v-model="phoneNumber"
        placeholder="请输入手机号"
        maxlength="11"
        class="input_self"
      ></el-input>
      <!-- <input type="number" :value="phoneNumber" placeholder="请输入手机号" class="input_self" /> -->
    </div>
    <div
      class="submit_btn_box"
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在为您跳转..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <img
        src="@/assets/img-btn-new.png"
        class="submit_btn"
        @click="getAdAndShows()"
      />
    </div>

    <div class="read_all">
      <el-checkbox v-model="cehckRead"> </el-checkbox>
      <div class="read_box">
        我已阅读并同意
        <span class="read_title" @click="handleRead"
          >《个人信息授权和保护声明》</span
        >
      </div>
    </div>

    <div class="foot_img_box" v-if="footImg" v-html="footImg"></div>

    <!-- 个人信息授权和保护声明弹窗 -->
    <el-dialog
      title="个人信息授权和保护声明"
      :visible.sync="dialogVisibleEmpower"
      width="80%"
    >
      <div class="empowerContent">
        <div v-html="empowerContent"></div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleEmpower = false"
          >我已知晓</el-button
        >
      </span>
    </el-dialog>
    <div class="class1">
      <el-dialog
        title="服务协议及隐私保护"
        :visible.sync="dialogVisible"
        :show-close="false"
        center
        width="80%"
      >
        <span
          >为了更好地保障您的合法权益，请您阅读并同意以下协议<span
            style="color: blue"
            @click="handleRead"
            >《个人信息授权和保护声明》</span
          >
        </span>
        <span slot="footer" class="dialog-footer">
          <div @click="dialogVisible = false" class="close-btn">取 消</div>
          <div class="sub-btn" @click="submitinfo">确定</div>
        </span>
      </el-dialog>
    </div>

    <div id="ad_container"></div>
  </div>
</template>

<script>
import llgsdk from "./utils/liuliangguoSDK_min";
import junboSDK from "./utils/zengshoubao";
import {
  getPackage,
  orderInsertLlg,
  llborderInsertLlg,
  fcsorderInsertLlg,
  zsborderInsertLlg,
} from "@/api/base";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      phoneNumber: "",
      urlParamsObj: {
        packageId: "",
        account_code: "",
        ad_position_id: "",
        clickid: "",
        channeId: "",
        media_id: "",
      },
      bgcImg: "",
      footImg: "",
      pageTitle: "",
      packageId: "",
      cehckRead: false,
      dialogVisibleEmpower: false,
      empowerContent: `
          <p>尊敬的客户：</p>
          <br />
          <p>您好!</p>
          <p>
            根据《中华人民共和国网络安全法》、《全国人民代表大会常务委员会关于加强网络信息保护的决定》、《电信和互联网用户个人信息保护规定》（工业和信息化部令第24号）和《电话用户真实身份信息登记规定》（工业和信息化部令第25号）等国家法律法规的要求，客户在我公司各类营业网点（含自有营业厅、手机营业厅、网上营业厅、授权合作代理店等）办理移动电话（含无线上网卡）、固定电话、家庭宽带入网、过户以及需要出示客户证件的有关业务时，客户应配合出示有效身份证件原件并进行查验、登记。登记信息包括姓名或名称、证件类型、号码及地址等。同时，为更好地提供服务，需要客户提供如联系人、联系电话、通信地址、电子邮箱等信息。客户本人持有效身份证件可通过自有营业厅查询和/或更正本人信息，或登录手机营业厅查询本人信息。如客户拒绝依法提供个人有效证件及真实信息，我公司有权不提供服务或终止服务。  
          </p>
          <br />
          <p>
            为向客户提供优质、个性化的服务，包括但不限于提供通信服务、保障通信服务安全、改善服务质量、推介个性化产品等，我公司将遵循合法、正当、必要的原则，按照法律法规规定和/或协议约定使用留存客户个人信息，并妥善保管，严格保密，依法保护客户个人信息，非因下列事由，不对外提供客户个人信息：  
          </p>
          <br />
          <p>1）事先获得客户的明确授权；</p>
          <p>2）根据有关的法律法规要求；</p>
          <p>3）按照相关司法机关和/或政府主管部门的要求；</p>
          <p>4）为维护社会公众的利益所必需且适当；</p>
          <p>5）为维护我公司或客户的合法权益所必需且适当。</p>
      `,

      startX: 0,
      moveX: 0,
      locationUrl: "",
      packageName: "",
      dyMenuTypeId: "", // 判断调用那个skd
    };
  },
  mounted() {
    // llgsdk.openDev();
    this.getUrlParam();
    this.getYiZunAd();
    this.getFaCaiShuAd();
    this.getBgcImg();
  },
  destroyed() {
    window.removeEventListener("popstate", this.handleGoBack, false);
  },
  methods: {
    // 流量宝js
    getYiZunAd() {
      const script = document.createElement("script");
      script.src = "https://static.ejcop.com/gluttony/page/yiZunAd.min.js";
      document.body.appendChild(script);
    },

    // 发财树js
    getFaCaiShuAd() {
      const script = document.createElement("script");
      script.src =
        "https://staticcdntx.xwtec.cn/static/taobaoH5/busi/fs/js/sdk/rec_00ad8c2295.min.js";
      document.body.appendChild(script);
    },

    detectOperatingSystem() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone 必须首先检测，因为它的 UA 也包含 "Android"
      if (/windows phone/i.test(userAgent)) {
        if (window.history && window.history.pushState) {
          // 添加当前界面记录
          history.pushState(null, null, document.URL);
          // 监听页面刷新
          window.addEventListener("popstate", this.handleGoBack, false);
        }
      }

      // Android
      if (/android/i.test(userAgent)) {
        if (window.history && window.history.pushState) {
          // 添加当前界面记录
          history.pushState(null, null, document.URL);
          // 监听页面刷新
          window.addEventListener("popstate", this.handleGoBack, false);
        }
      }

      // iOS
      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        document.addEventListener("touchstart", this.handleTouchStart, {
          passive: false,
        });
        document.addEventListener("touchmove", this.handleTouchMove, {
          passive: false,
        });
      }
    },

    handleTouchStart(event) {
      this.startX = event.touches[0].clientX;
    },
    handleTouchMove(event) {
      this.moveX = event.touches[0].clientX - this.startX;
      if (Math.abs(this.moveX) > 50) {
        // 设定阈值为50
        event.preventDefault(); // 阻止默认事件
        this.goBack(); // 触发返回操作
      }
    },
    goBack() {
      // 返回操作
      this.programEntrynum();
      this.getXcxScheme();
    },

    handleGoBack() {
      this.programEntrynum();
      this.getXcxScheme();
    },

    // 获取微信小程序scheme码
    getXcxScheme() {
      const axios = require("axios");
      axios
        .get("https://saler.jkcae.com/app/getXcxScheme", "GET")
        .then((res) => {
          if (res.data.code == 1) {
            this.locationUrl = res.data.data.openlink;
            location.href = this.locationUrl;
            window.removeEventListener("popstate", this.handleGoBack, false);
          } else {
            window.removeEventListener("popstate", this.handleGoBack, false);
            return;
          }
        });
    },

    // 统计用户进入小程序次数
    programEntrynum() {
      const axios = require("axios");
      axios
        .get("https://saler.jkcae.com/app/program_entrynum", "GET")
        .then((res) => {
          if (res.data.code == 1) {
          } else {
          }
        });
    },

    //获取url参数
    getUrlParam() {
      const that = this;
      this.urlParamsObj.packageId = that.getQueryString("packageId");
      this.urlParamsObj.account_code = that.getQueryString("account_code");

      this.urlParamsObj.ad_position_id = that.getQueryString("ad_position_id");

      this.urlParamsObj.media_id = that.getQueryString("media_id");

      this.urlParamsObj.ssp_source = that.getQueryString("ssp_source");

      this.urlParamsObj.clickid = that.getQueryString("clickid");

      this.urlParamsObj.channeId = that.getQueryString("channe_id") || 32;

      if (this.urlParamsObj.account_code == "42627832") {
        this.detectOperatingSystem();
      }
    },

    // 用正则获取url参数
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      if (!window.location.href.split("?")[1]) return;
      let url = window.location.href.split("?")[1].match(reg);
      if (url != null) {
        return decodeURI(url[2]); //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
      } else {
        return null;
      }
    },

    // 获取背景图
    getBgcImg() {
      getPackage({ package_id: this.urlParamsObj.packageId }).then((res) => {
        this.bgcImg = res.data.head_img;
        this.footImg = res.data.details;
        this.pageTitle = res.data.my_title || "落地页";
        this.packageName = res.data.name;
        this.dyMenuTypeId = res.data.dy_menu_type_id;
        let body = document.getElementsByTagName("body")[0];
        body.style.background = res.data.color || "#faefdb";
      });
    },

    // 我已阅读
    handleRead() {
      this.dialogVisibleEmpower = true;
    },
    submitinfo() {
      this.dialogVisible = false;
      this.cehckRead = true;
      this.getOrderInsertLlg();
    },

    // 流量果-调接口
    getOrderInsertLlg() {
      let that = this;
      that.loading = true;

      orderInsertLlg({
        mobile: that.phoneNumber,
        click_id: that.urlParamsObj.clickid,
        package_id:
          that.urlParamsObj.packageId == "159"
            ? "158"
            : that.urlParamsObj.packageId,
        channe_id: that.urlParamsObj.channeId,
        account_code: that.urlParamsObj.account_code,
      })
        .then((resp) => {
          const params = {
            ssp_source:
              "packageId=" +
              that.urlParamsObj.packageId +
              "&" +
              "account_code=" +
              that.urlParamsObj.account_code,
            app_key: "LLG10005560",
            app_secret: "ed62a0d4b9edfb65ec3d720dcc4b93db",
            ad_position_id: that.urlParamsObj.ad_position_id,
            phone: that.phoneNumber,
            fail_message: "用户失败原因",
            product_name: "原投放的产品名称",
          };

          llgsdk.getAdAndShow(params, function (res) {
            that.loading = false;
            if (res.is_success) {
              if (that.urlParamsObj.channeId == 36) {
                mi_tracker.log("form", {
                  conversionId: "142842",
                });
              }
            }
          });
        })
        .catch((err) => {
          //   that.$message.error(err.msg);
          that.loading = false;
        });
    },

    // 流量宝-调接口
    getLlborderInsertLlg() {
      llborderInsertLlg({
        mobile: this.phoneNumber,
        click_id: this.urlParamsObj.clickid,
        package_id: this.urlParamsObj.packageId,
        channe_id: this.urlParamsObj.channeId,
        account_code: this.urlParamsObj.account_code,
      })
        .then((res) => {
          initYiZunAd({
            key: "14751846",
            secret: "Tu4MM8SUxbi85oiY",
          });
          renderYiZunAd({
            conId: "ad_container",
            ad_position_id: this.urlParamsObj.ad_position_id,
            media_id: this.urlParamsObj.media_id,
            goods_name: this.packageName,
            phone: this.phoneNumber,
          }).then((res) => {
            if (res.success) {
            } else {
              this.setRenderYiZunAd();
            }
          });
        })
        .catch((err) => {
          // this.$message.warning("网络错误，请重试");
          // return;
        });
    },

    // 流量宝失败后二次调用
    setRenderYiZunAd() {
      renderYiZunAd({
        conId: "ad_container",
        ad_position_id: this.urlParamsObj.ad_position_id,
        media_id: this.urlParamsObj.media_id,
        phone: this.phoneNumber,
        goods_name: this.packageName,
        auto: true,
        msg: "调用失败",
      }).then((res) => {
        if (res.success) {
        } else {
        }
      });
    },

    // 发财树-调接口
    getFcsorderInsertLlg() {
      fcsorderInsertLlg({
        mobile: this.phoneNumber,
        click_id: this.urlParamsObj.clickid,
        package_id: this.urlParamsObj.packageId,
        channe_id: this.urlParamsObj.channeId,
        account_code: this.urlParamsObj.account_code,
      })
        .then((res) => {
          const { v4: uuidv4 } = require("uuid");
          const sdk = recsdk.init({
            sessionId: uuidv4(),
            unionKey: "f49519f8f6144997af1761b10dd0bc29 ",
          });

          // 调用获取推荐产品，获取成功后自动跳转连接
          sdk.getAd(
            {
              phoneNum: this.phoneNumber,
              pointNum: "same_bzz",
              open: true,
              redirectTime: 1200,
            },
            (res) => {
              // 获取接口回调，成功，失败都会返回
              // 返回值示例：成功{"success": true},失败{"success": false, "message":"错误信息"}
              // 注：页面效果会弹出欣网链接页面，所以不建议在此做有关页面的动作
            }
          );
        })
        .catch((err) => {
          // this.$message.warning("网络错误，请重试");
          // return;
        });
    },

    // 增收宝-调接口
    getZsborderInsertLlg() {
      const that = this;
      zsborderInsertLlg({
        mobile: this.phoneNumber,
        click_id: this.urlParamsObj.clickid,
        package_id: this.urlParamsObj.packageId,
        channe_id: this.urlParamsObj.channeId,
        account_code: this.urlParamsObj.account_code,
      })
        .then((ress) => {
          const params = {
            channel_id: "20240626091501392055001",
            channel_secret: "472578bb246b1c507a",
            ad_position_id: that.urlParamsObj.ad_position_id,
            scenes: "order_success",
          };

          //获取⼴告并展⽰
          junboSDK.getAdAndShow(params, function (res) {
            if (!res.is_success) {
              //获取⼴告失败执⾏动作
            }
          });
        })
        .catch((err) => {});
    },

    //提交
    getAdAndShows() {
      const that = this;
      const _mobileRe =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.phoneNumber == "") {
        this.$message.error("请输入手机号");
        return;
      } else if (!_mobileRe.test(this.phoneNumber)) {
        this.$message.error("请输入正确手机号");
        return;
      } else if (this.cehckRead == false) {
        this.dialogVisible = true;
        return;
      } else {
        that.getOrderInsertLlg();
        // if (that.dyMenuTypeId == null || that.dyMenuTypeId == 1) {
        //   that.getOrderInsertLlg();
        // } else if (that.dyMenuTypeId == 2) {
        //   that.getLlborderInsertLlg();
        // } else if (that.dyMenuTypeId == 3) {
        //   that.getFcsorderInsertLlg();
        // } else if (that.dyMenuTypeId == 4) {
        //   that.getZsborderInsertLlg();
        // }
      }
    },
  },
};
</script>

<style>
.empowerContent {
  height: 50vh;
  overflow-y: auto;
}
.dialog-footer {
  display: flex;
  justify-content: space-around;
  height: 35px;
  line-height: 31px;
}
.close-btn {
  width: 40%;
  color: #ff6347;
  border: 2px solid #ff6347;
  border-radius: 50px;
}
.sub-btn {
  background-color: #ff6347;
  border: 2px solid #ff6347;

  border-radius: 50px;
  color: #fff;
  width: 40%;
}
.class1 .el-dialog {
  border-radius: 15px !important;
}
* {
  padding: 0;
  margin: 0;
}

html,
body {
  background: #faefdb;
}

.banner_box {
  width: 100%;
}

.banner_img {
  width: 100%;
}

.input_box {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

::v-deep .el-input__inner {
  width: 90%;
  height: 50px;
  font-size: 20px;
  border: 1px solid #ff8c00;
  border-radius: 12px;
  padding-left: 20px;
}

.submit_btn_box {
  display: flex;
  justify-content: center;
}

.foot_img_box {
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
}

.read_all {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.read_box {
  margin-left: 5px;
  color: #cf594d;
  font-size: 15px;
}

.read_title {
  color: #c1261d;
  font-weight: 550;
}

@keyframes xing {
  0% {
    transform: scale(0.6);
  }

  25% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(0.6);
  }

  75% {
    transform: scale(0.7);
  }
}

.submit_btn {
  width: 100%;
  height: 100%;
  transform: scale(0.6);
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
}
</style>
